<template>
  <div class="fillcontain">
    <div class="table_container">
      <el-table
        :data="goodData"
        style="width: 100%"
        border>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="商品价格">
                <span>{{ props.row.price }}</span>
              </el-form-item>
              <el-form-item label="商品ID">
                <span>{{ props.row.goodsId }}</span>
              </el-form-item>
              <el-form-item label="商品介绍">
                <span>{{ props.row.description }}</span>
              </el-form-item>
              <el-form-item label="截止时间">
                <span>{{ props.row.endTime }}</span>
              </el-form-item>
              <el-form-item label="商品评分">
                <span>{{ props.row.rating }}</span>
              </el-form-item>
              <el-form-item label="月销量">
                <span>{{ props.row.monthSales }}</span>
              </el-form-item>
              <el-form-item label="总销量">
                <span>{{ props.row.totalSales }}</span>
              </el-form-item>
              <el-form-item label="食品库存">
                <span>{{ props.row.num }}</span>
              </el-form-item>
              <el-form-item label="食品图片">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="props.row.imagePath"
                  fit="contain"></el-image>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name" />
        <el-table-column label="商品介绍" prop="description" />
        <el-table-column label="商品库存" prop="num" />
        <el-table-column label="商品状态" prop="state">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.state === 1"
              size="middle"
              type="success"
            >上架</el-tag>
            <el-tag
              v-if="scope.row.state !== 1"
              size="middle"
              type="danger"
            >下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="350px">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.noticeFlag === 0"
              size="small"
              type="warning"
              @click="changeNotice(scope.row)"
            >通知取货</el-button>
            <el-tag
              v-if="scope.row.noticeFlag === 1"
              size="middle"
              type="success"
              style="margin-right: 7px"
            >已通知</el-tag>
            <el-button
              size="small"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
              v-if="scope.row.state !== 1"
              size="small"
              type="success"
              @click="changeGoodState(scope.row)"
            >重新上架</el-button>
            <el-button
              v-if="scope.row.state === 1"
              size="small"
              type="danger"
              @click="changeGoodState(scope.row)"
            >下架</el-button>
            <el-button
              size="small"
              @click="toFeedBack(scope.row)"
            >查看评价</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getGoodList" />

      <el-dialog title="修改商品信息" :visible.sync="dialogFormVisible">
        <el-form :model="selectTable">
          <el-form-item label="商品名称" label-width="100px">
            <el-input v-model="selectTable.name" auto-complete="off" />
          </el-form-item>
          <el-form-item label="商品价格" label-width="100px" prop="price">
            <el-input v-model="selectTable.price"></el-input>
          </el-form-item>
          <el-form-item label="商品介绍" label-width="100px">
            <el-input v-model="selectTable.description" />
          </el-form-item>
          <el-form-item label="商品库存" label-width="100px" prop="num">
            <el-input v-model="selectTable.num"></el-input>
          </el-form-item>
          <el-form-item label="截止日期" prop="endTime">
            <el-date-picker
              v-model="selectTable.endTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="商品图片" label-width="100px">
            <el-upload
              action="#"
              :on-change="handleChange"
              :auto-upload="false"
              :on-preview="handlePreview"
              list-type="picture-card"
              :on-remove="handleRemove"
              :on-success="onSuccess">
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <el-row style="overflow: auto; text-align: center;">
          <el-table
            :data="specs"
            style="margin-bottom: 20px;"
            :row-class-name="tableRowClassName"
          >
            <el-table-column prop="specs" label="规格" />
            <el-table-column prop="packing_fee" label="包装费" />
            <el-table-column prop="price" label="价格" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="danger"
                  @click="deleteSpecs(scope.$index)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button
            type="primary"
            style="margin-bottom: 10px;"
            @click="specsFormVisible = true"
          >添加规格</el-button>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateGoodInfo">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { getAllGoods, updateGood, updateGoodNotice } from '../../api/communityHelp/goods'
  import { uploadImg } from '../../api/ec/img'

export default {
  name: 'Goods',
  data() {
    return {
      fileMgrUrl: '',
      uploadHeaders: {
        Authorization: ''
      },
      restaurant_id: 222,
      restaurant_name: '麻辣香锅a',
      restaurant_address: '北京市海淀区西土城路10号',
      city: {},
      offset: 0,
      limit: 20,
      count: 0,
      currentPage: 1,
      menuOptions: [],
      selectMenu: {},
      selectIndex: null,
      specsForm: {
        specs: '',
        packing_fee: 0,
        price: 20
      },
      specsFormrules: {
        specs: [{ required: true, message: '请输入规格', trigger: 'blur' }]
      },
      specsFormVisible: false,
      expendRow: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 20
      },
      goodsId: '',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        goodsId: null,
        name: null,
        price: null,
        imagePath: null,
        endTime: null,
        monthSales: null,
        totalSales: null,
        description: null,
        rating: null,
        state: null,
        num: null,
        communityId: null,
        noticeFlag: null
      },
      goodData: [],
      selectTable: {
        goodsId: 0,
        name: 111,
        price: 2,
        imagePath: '',
        endTime: null,
        monthSales: 0,
        totalSales: 0,
        description: '',
        rating: 5,
        state: 1,
        num: 1,
        communityId: 0,
        noticeFlag: 0
      },
      dialogFormVisible: false,
      imgFile: null
    }
  },
  mounted() {
    getAllGoods(this.queryParams).then(response => {
      console.log(response)
      this.goodData = response.rows
      this.total = response.total
    })
  },
  methods: {
    handleChange(file) {
      this.imgFile = file.raw
      const form = new FormData()
      form.append('file', this.imgFile)
      uploadImg(form).then(response => {
        console.log('response')
        console.log(response)
        this.selectTable.imagePath = response.data
      })
      console.log(file)
    },
    handlePreview(file) {
      console.log(file)
    },
    onSuccess(response) {
      console.log('response')
      console.log(response)
    },
    handleRemove(file) {
      console.log(file)
    },
    handleEdit(data) {
      this.selectTable = data
      this.dialogFormVisible = true
    },
    changeGoodState(data) {
      if (data.state === 1) {
        data.state = 0
      } else {
        data.state = 1
      }
      updateGood(data).then(response => {
        if (response.code === 200) {
          this.$message.success('更新成功')
        } else {
          this.$message.error('更新失败')
        }
      })
    },
    changeNotice(data) {
      data.noticeFlag = 1
      updateGoodNotice(data).then(response => {
        if (response.code === 200) {
          this.$message.success('通知成功')
        } else {
          this.$message.error('通知失败')
        }
      })
    },
    updateGoodInfo() {
      updateGood(this.selectTable).then(response => {
        if (response.code === 200) {
          this.$message.success('更新成功')
          this.getGoodList()
        } else {
          this.$message.error('更新失败')
          this.getGoodList()
        }
      })
      this.dialogFormVisible = false
    },
    getGoodList() {
      getAllGoods(this.queryParams).then(response => {
        console.log(response)
        this.goodData = response.rows
        this.total = response.total
      })
    },
    toFeedBack(row) {
      this.$router.push({
        path: 'feedBack',
        query: { goodsId: row.goodsId }
      })
    }
  }
}
</script>

<style scoped>
  /deep/.demo-table-expand {
    font-size: 0;
  }
  /deep/.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  /deep/.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  /deep/.table_container {
    padding: 20px;
  }
  .Pagination {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
  }
  /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  /deep/.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  /deep/.avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>

